<script setup>
import { ref, reactive, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
import { getRtmp, closeRtmp } from '@/assets/api/device'
import 'videojs-flash'
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import config from '@/assets/js/config'
// eslint-disable-next-line no-undef

const props = defineProps({
    videoData: {
        type: Object,
        default() {
            return {}
        },
    },
    videoSize: {
        type: Object,
        default() {
            return {}
        },
    },
})

function updateVideo() {
    const params = {
        number: props.videoData.number,
        ip_addr: config.IPUrl,
    }
    getRtmp(params).then((res) => {
        play(res.data)
    })
}
function play(url) {
    if (player) {
        player.src({
            src: url,
            type: 'rtmp',
        })
    } else {
        const playerOptions = reactive({
            autoplay: true, // 是否自动播放
            fullscreenToggle: false, // 是否全屏
            muted: true, // 是否静音
            controls: false,
            fluid: false, // 宽高自适应
            techOrder: ['html5', 'flash'],
            // techOrder: ['flash', 'html5'],
            notSupportMessage: '无法播放',
            id: ref('v' + +new Date()),
            sources: [
                {
                    src: url,
                    type: 'rtmp',
                },
            ],
        })
        initPlayer(playerOptions)
    }
}
function initPlayer(options) {
    player = videojs(videoRef.value, options, () => {
        videojs.log('播放器已经准备好了!')
        player.on('error', () => {
            loading.value = true
            loadingText.value = '加载失败'
        })
        player.on('loadstart', () => {
            loading.value = true
            loadingText.value = '开始加载'
        })
        player.on('progress', () => {
            loading.value = false
            loadingText.value = '加载中'
        })
        player.on('timeupdate', () => {
            // console.log('timeupdate')
        })
        player.on('loadedmetadata', () => {
            // console.log('loadedmetadata')
        })
        player.on('playing', () => {
            // console.log('playing')
        })
        player.on('pause', () => {
            loading.value = false
            // console.log('pause')
        })
        player.on('play', () => {
            // console.log('play')
            loading.value = false
        })
        player.on('waiting', () => {
            console.log('waiting')
            // loading.value = true
            // loadingText.value = '等待响应'
        })
        player.on('stalled', () => {
            // console.log('网速异常')
        })
    })
}
const videoRef = ref()
let player = null
const loading = ref(false)
const loadingText = ref('')
onMounted(() => {
    updateVideo()
})
onUnmounted(() => {
    // closeVideo(props.videoData.number)
    if (player) {
        player.dispose()
    }
})
onBeforeUnmount(() => {
    closeVideo(props.videoData.number)
})
function closeVideo(number) {
    closeRtmp(number).then(() => {
        console.log('关闭成功', number)
    })
}
defineExpose({ updateVideo, closeVideo })
// video js
</script>
<template>
    <h4 class="video-name">{{ videoData.name }}</h4>
    <video
        ref="videoRef"
        class="video-js vjs-default-skin vjs-big-play-centered"
        style="width: 100%; height: 100%"
        preload="auto"
        crossOrigin
        data-setup='{ "html5" : { "nativeTextTracks" : false } }'
        muted
        controls="controls"
    ></video>
    <div class="video-status" v-if="loading">{{ loadingText }}</div>
</template>
<style lang="scss" scoped>
.video-name {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
}
.video-status {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
